<template>
<div>
    <div class="banner" @click="handleBannerClick">
        <img class='banner-img' :src="bannerImg">
        <div class="banner-info">
            <div class="banner-title">{{this.sightName}}</div>
            <div class="banner-number">
              <span class="iconfont banner-icon">&#xe626;</span>  
               {{this.bannerImg.length}}
            </div>
        </div>
    </div>
    <common-gallary :imgs ='bannerImgs' v-show='showGallary' @close='handleBannerClose'></common-gallary>
</div>
</template>
<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
    name:'DetailBanner',
    props:{
        sightName:String,
        bannerImg:String,
        bannerImgs:Array
    },
    data() {
        return {
            showGallary:false
        }
    },
    methods:{
        handleBannerClick (){
            this.showGallary = true
        },
        handleBannerClose () {
            this.showGallary = false
        }
    },
    components: {
        CommonGallary
    }
}
</script>
<style lang='stylus' scoped>
 .banner
  position: relative
  overflow: hidden
  height :0
  padding-bottom :55%
  .banner-img
   width :100%
  .banner-info
   display:flex
   color :#fff
   position: absolute 
   left:0
   right :0
   bottom:0
   background-image :linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
   line-height :.6rem 
   .banner-title
    flex :1
    font-size :.32rem
    padding:0 .2rem
   .banner-number
    height :.32rem
    margin-top:.14rem
    padding :0 .4rem
    line-height :.32rem
    border-radius :.2rem
    background :rgba(0,0,0,.8)
    font-size :.24rem
    .banner-icon
     font-size :.24rem
     line-height :.32rem
</style>
